<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr>
		<textarea placeholder="请输入要评论的内容(最多吐槽50字)" maxlength="50" v-model="msg" />
		<mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
		
		<div class="cmt-list">
			<div class="cmt-item" v-for="(item,i) in comments" :key="i">
				<div class="cmt-title">
					第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dataFormat}}
				</div>
				<div class="cmt-body">
					{{item.content==='undefined' ? '此用户很懒，什么都没说':item.content}}
				</div>
			</div>
		</div>
		
		<mt-button type="default" size="large" plain @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	
	export default {
		data() {
			return {
				pageIndex:1		,//默认展示第一页数据
				comments:[],	//所有评论内容
				msg:''	//用户评论内容
			};
		},
		created(){
			this.getComments();
		},
		methods: {
			getComments() {		//获取评论
				this.$http.get('http://www.liulongbin.top:3005/api/getcomments/'+this.id+"?pageindex=" + this.pageIndex).then(result => {
					if(result.body.status === 0){
						// this.comments = result.body.message;
						this.comments = this.comments.concat(result.body.message);
						// 每当获取新评论数据时，把老数据一起加载
						// Toast("获取评论成功")
					}
					else{
						Toast("获取评论失败")
					}
				})
			},
			getMore(){	//加载更多
				this.pageIndex++;
				this.getComments();
			},
			postComment(){	//发表评论
			
			// 校验是否为空
			if(this.msg.trim().length === 0){
				return Toast("评论内容不能为空")
			}
			
			// 参数1，请求的url地址，
			// 参数2，提交给服务器的数据对象{content:this.msg}
			// 参数3，定义提交时候，表单中的数据的格式{emulateJSON}
				this.$http.post('http://www.liulongbin.top:3005/api/postComment/'+this.$route.params.id,{content:this.msg.trim()}).then(function(result){
					if(result.body.status === 0){
						// 1.拼接出一个评论对象
						var cmt = {
							user_name:'匿名用户',
							add_time: Date.now(),
							content: this.msg.trim()
						}
						this.comments.unshift(cmt)
						this.msg = ""
					}
				})
			}
		},
		props:["id"]
	}
</script>

<style lang="less" scoped>
.cmt-container{
	h3{
		font-size: 18px;
	}
	
	textarea{
		font-size: 14px;
		height: 85px;
		margin: 0;
	}
	
	.cmt-list{
		margin: 5px 0;
		.cmt-item{
			
			.cmt-title{
				font-size: 14px;
				line-height: 30px;
				background-color: #ccc;
			}
			
			.cmt-body{
				line-height: 35px;
				text-indent: 2em;
			}
		}
	}
}
</style>
